<template>
  <el-form ref="flowForm"
           :rules="rules" status-icon
           label-width="180px" :model="flowDefinition">
    <el-form-item label="流程名称" prop="name">
      <el-input placeholder="请输入流程名称" v-model="flowDefinition.name"/>
    </el-form-item>

    <el-form-item label="表单流程标题" required>
      <el-input placeholder="表单流程标题" @click="configTitleFormula"
                readonly v-model="flowDefinition.titleFormula.formulaTitle"/>
    </el-form-item>

    <el-form-item label="pc视图" prop="pcViewId" >
      <el-select v-model="flowDefinition.pcViewId" style="width: 100%"
                 icon="pc"
                 placeholder="pc视图" @change="viewChange">
        <el-option v-for="view in formDefinition.views"
                   :key="view.id"
                   :value="view.id"
                   :label="view.viewName"/>
      </el-select>
    </el-form-item>
    <el-form-item label="pc视图操作权限" prop="pcViewActionId">
      <el-select v-model="flowDefinition.pcViewActionId" style="width: 100%"
                 placeholder="pc视图操作权限">
        <el-option v-for="viewAction in viewActionOptions"
                   :key="viewAction.id"
                   :value="viewAction.id"
                   :label="viewAction.actionName"/>
      </el-select>
    </el-form-item>

    <el-form-item label="移动端视图" prop="mobileViewId">
      <el-select v-model="flowDefinition.mobileViewId" style="width: 100%"
                 placeholder="移动端视图" @change="mobileViewChange">
        <el-option v-for="view in formDefinition.views"
                   :key="view.id"
                   :value="view.id"
                   :label="view.viewName"/>
      </el-select>
    </el-form-item>
    <el-form-item label="移动端视图操作权限" prop="mobileViewActionId">
      <el-select v-model="flowDefinition.mobileViewActionId" style="width: 100%"
                 placeholder="移动端视图操作权限">
        <el-option v-for="viewAction in mobileViewActionOptions"
                   :key="viewAction.id"
                   :value="viewAction.id"
                   :label="viewAction.actionName"/>
      </el-select>
    </el-form-item>

    <el-form-item label="创建时间">
      <el-input disabled v-model="flowDefinition.createTime"/>
    </el-form-item>
  </el-form>

  <FormulaEditor ref="FormulaEditor"/>
</template>

<script>
import {isEmpty, required} from '@/utils/CommonUtils';
import {DefaultFlowDefinition} from '@/components/flow/DefaultFlowDefinition';
import {DefaultFormDefinition} from '@/components/form/DefaultFormDefinition';
import FormulaEditor from '@/components/formula/FormulaEditor.vue';

export default {
  name: 'FlowProperty',
  components: {
    FormulaEditor,
  },
  props: {
    formDefinition: {
      type: Object,
      default: () => DefaultFormDefinition,
    },
    flowDefinition: {
      type: Object,
      default: () => DefaultFlowDefinition,
    }
  },
  data() {
    return {
      viewActionOptions: [],
      mobileViewActionOptions: [],
      rules: {
        name: [required],
        pcViewId: [required],
        pcViewActionId: [required],
      }
    };
  },
  methods: {
    configTitleFormula() {
      this.$refs.FormulaEditor.setData(this.formDefinition, this.flowDefinition.titleFormula, 'string');
    },
    viewChange(viewId) {
      this.flowDefinition.pcViewActionId = undefined;
      this.resolvePcViewActionOptions();
    },
    setData() {
      this.resolvePcViewActionOptions();
      this.resolveMobileViewActionOptions();
    },
    setFormDefinition() {

    },
    resolvePcViewActionOptions() {
      this.viewActionOptions = this.formDefinition.viewActions.filter(v => v.viewId === this.flowDefinition.pcViewId);
    },
    mobileViewChange(viewId) {
      this.flowDefinition.mobileViewActionId = undefined;
      this.resolveMobileViewActionOptions();
    },
    resolveMobileViewActionOptions() {
      this.mobileViewActionOptions = this.formDefinition.viewActions.filter(v => v.viewId === this.flowDefinition.mobileViewId);
    },
    getData() {
      return new Promise((success, err) => {
          this.checkData(() => {
            success();
          })
      });
    },
    checkData(callback) {
      let flowDefinition = this.flowDefinition;
      if (isEmpty(flowDefinition)
        || isEmpty(flowDefinition.titleFormula)
        || isEmpty(flowDefinition.titleFormula.formulaText)) {
        this.$message.warning('流程标题不能为空!');
        return;
      }
      this.$refs.flowForm.validate((valid, errors) => {
        if (valid) {
          callback();
        }
      });
    },
    save() {
      this.checkData(() => {
        if (this.flowDefinition.key) {
          this.$windowManager.emit('updateFlow', {
            ...this.flowDefinition,
            flowDefinition: this.$refs.FlowModelEditor.getData()
          });
        } else {
          this.$windowManager.emit('addFlow', {
            ...this.flowDefinition,
            flowDefinition: this.$refs.FlowModelEditor.getData()
          });
        }

        this.$windowManager.close();
      });
    },
  }
};
</script>
